<template>
  <page class="notnews">
    <page-header>
      <x-header :left-options="{backText: ''}">公告消息</x-header>
    </page-header>
    <page-content :scroll="true">
      <div class="con">
        <div class="con-c">
          <div class="con-l">
            <p>公告标题</p>
            <p>公告类型</p>
            <p>发布时间</p>
            <p style="border-bottom: 0;">公告内容</p>
          </div>
          <div class="con-r">
            <p>{{message.msgDetail && message.msgDetail.title}}</p>
            <p>{{message.msgType || '--'}}</p>
            <p>{{message.createDate}}</p>
            <p style="border-bottom: 0;">{{message.msgDetail && message.msgDetail.content}}</p>
          </div>
        </div>
      </div>
    </page-content>
  </page>
</template>

<script>
import { mapGetters } from 'vuex'
import { msgDetail } from '@service'
import { XHeader } from 'vux'
export default {
  name: 'NotifyDetails',
  components: {
    XHeader
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token'
    })
  },
  data () {
    return {
      message: {}
    }
  },
  methods: {
    async loadData () {
      try {
        let token = this.token
        let id = this.$route.params.id
        let data = await msgDetail.info({ token, id })
        console.log(data)
        this.message = data
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
.notnews {
  width: 100%;
  height: 100%;
  .top {
    position: fixed;
    top: 0;
    width: 100%;
    height: 1.25rem;
    background: #1e82d2;
  }
  .head {
    position: fixed;
    top: 1.25rem;
    width: 100%;
    background: #1e82d2;
    font-size: 1.125rem;
    height: 3rem;
  }
  .kong {
    height: 4.25rem;
  }
  .con {
    width: 100%;
    min-height: 10rem;
    background: #fff;
  }
  .con-c {
    padding: 0.5rem;
    overflow: hidden;
    font-size: 0.8rem;
  }
  .con-l {
    width: 30%;
    float: left;
    min-height: 6rem;
    line-height: 2.5rem;
  }
  .con-l p {
    border-bottom: 1px solid #f5f5f5;
  }
  .con-r {
    width: 70%;
    float: left;
    min-height: 6rem;
    line-height: 2.5rem;
  }
  .con-r p {
    border-bottom: 1px solid #f5f5f5;
  }
}
</style>
